import type { ThemeConfig } from 'antd';

export interface CustomTheme {
  name: string;
  key: string;
  config: ThemeConfig;
  isDark?: boolean;
  gradient?: string;
  description?: string;
}

// 极简现代主题 (默认) - 苹果风格
export const lightTheme: CustomTheme = {
  name: '极简现代',
  key: 'light',
  description: '🍎 苹果风格 | 简洁优雅 | 毛玻璃效果',
  gradient: 'linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%)',
  config: {
    token: {
      colorPrimary: '#007AFF',
      colorSuccess: '#34C759',
      colorWarning: '#FF9500',
      colorError: '#FF3B30',
      colorInfo: '#5AC8FA',
      borderRadius: 12,
      borderRadiusLG: 16,
      borderRadiusSM: 8,
      wireframe: false,
      colorBgContainer: '#ffffff',
      colorBgElevated: '#ffffff',
      colorBgLayout: '#f2f2f7',
      colorBorder: '#d1d1d6',
      colorBorderSecondary: '#e5e5ea',
      colorText: '#000000',
      colorTextSecondary: '#3c3c43',
      colorTextTertiary: '#8e8e93',
      colorTextQuaternary: '#c7c7cc',
      boxShadow: '0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24)',
      boxShadowSecondary: '0 3px 6px 0 rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.23)',
      fontFamily: '-apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif',
      fontSize: 14,
      fontSizeLG: 16,
      fontSizeXL: 20,
      lineHeight: 1.5,
      controlHeight: 44,
    },
    components: {
      Layout: {
        siderBg: '#ffffff',
        headerBg: 'rgba(255, 255, 255, 0.8)',
        bodyBg: '#f2f2f7',
        headerHeight: 64,
        siderWidth: 280,
      },
      Menu: {
        itemBg: 'transparent',
        itemSelectedBg: 'rgba(0, 122, 255, 0.1)',
        itemSelectedColor: '#007AFF',
        itemHoverBg: 'rgba(0, 122, 255, 0.05)',
        itemActiveBg: 'rgba(0, 122, 255, 0.15)',
        itemBorderRadius: 12,
        itemMarginInline: 8,
        itemPaddingInline: 16,
      },
      Card: {
        borderRadiusLG: 16,
        paddingLG: 24,
      },
      Button: {
        borderRadius: 12,
        controlHeight: 44,
        paddingContentHorizontal: 24,
        fontWeight: 600,
      },
      Modal: {
        titleColor: '#000000',
        titleFontSize: 18,
        titleFontWeight: 600,
        headerBg: '#ffffff',
        contentBg: '#ffffff',
        borderRadiusLG: 16,
      },
      Avatar: {
        colorBgContainer: '#ffffff',
        colorText: '#007AFF',
        colorTextPlaceholder: '#8e8e93',
      },
      Progress: {
        colorSuccess: '#34C759',
        colorInfo: '#007AFF',
        colorText: '#000000',
        colorTextDescription: '#3c3c43',
      },
      Pagination: {
        colorBgContainer: '#ffffff',
        colorText: '#000000',
        colorTextDisabled: '#8e8e93',
        itemActiveBg: '#007AFF',
        itemInputBg: '#ffffff',
      },
      Table: {
        colorBgContainer: '#ffffff',
        colorText: '#000000',
        colorTextHeading: '#000000',
        headerBg: '#f2f2f7',
        rowHoverBg: 'rgba(0, 122, 255, 0.05)',
      },
    },
  },
};



// 专业深色主题 - 商务风格
export const darkTheme: CustomTheme = {
  name: '专业深色',
  key: 'dark',
  isDark: true,
  description: '🌙 商务专业 | 护眼深色 | 高效办公',
  gradient: 'linear-gradient(135deg, #1e293b 0%, #334155 100%)',
  config: {
    token: {
      colorPrimary: '#3b82f6',
      colorSuccess: '#10b981',
      colorWarning: '#f59e0b',
      colorError: '#ef4444',
      colorInfo: '#06b6d4',
      borderRadius: 8,
      borderRadiusLG: 12,
      borderRadiusSM: 6,
      wireframe: false,
      colorBgContainer: '#1e293b',
      colorBgElevated: '#334155',
      colorBgLayout: '#0f172a',
      colorBorder: '#475569',
      colorBorderSecondary: '#374151',
      colorText: '#f1f5f9',
      colorTextSecondary: '#cbd5e1',
      colorTextTertiary: '#94a3b8',
      colorTextQuaternary: '#64748b',
      boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2)',
      boxShadowSecondary: '0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2)',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif',
      fontSize: 14,
      fontSizeLG: 16,
      fontSizeXL: 20,
      lineHeight: 1.6,
      controlHeight: 40,
    },
    components: {
      Layout: {
        siderBg: '#1e293b',
        headerBg: '#1e293b',
        bodyBg: '#0f172a',
        headerHeight: 64,
        siderWidth: 280,
      },
      Menu: {
        darkItemBg: '#1e293b',
        darkItemSelectedBg: 'rgba(59, 130, 246, 0.15)',
        darkItemSelectedColor: '#93c5fd',
        darkItemHoverBg: 'rgba(59, 130, 246, 0.08)',
        darkItemColor: '#cbd5e1',
        itemBorderRadius: 8,
        itemMarginInline: 8,
        itemPaddingInline: 16,
      },
      Card: {
        borderRadiusLG: 12,
        paddingLG: 24,
      },
      Button: {
        borderRadius: 8,
        controlHeight: 40,
        paddingContentHorizontal: 20,
        fontWeight: 500,
      },
      Modal: {
        titleColor: '#f1f5f9',
        titleFontSize: 18,
        titleFontWeight: 600,
        headerBg: '#1e293b',
        contentBg: '#1e293b',
        borderRadiusLG: 12,
      },
      Avatar: {
        colorBgContainer: '#1e293b',
        colorText: '#93c5fd',
        colorTextPlaceholder: '#64748b',
      },
      Progress: {
        colorSuccess: '#10b981',
        colorInfo: '#3b82f6',
        colorText: '#f1f5f9',
        colorTextDescription: '#cbd5e1',
      },
      Pagination: {
        colorBgContainer: '#1e293b',
        colorText: '#f1f5f9',
        colorTextDisabled: '#64748b',
        itemActiveBg: '#3b82f6',
        itemInputBg: '#1e293b',
      },
      Table: {
        colorBgContainer: '#1e293b',
        colorText: '#f1f5f9',
        colorTextHeading: '#f1f5f9',
        headerBg: '#0f172a',
        rowHoverBg: 'rgba(59, 130, 246, 0.08)',
      },
    },
    algorithm: 'darkAlgorithm' as any,
  },
};

// 新拟物主题 - 立体质感设计（色彩增强版）
export const purpleTheme: CustomTheme = {
  name: '新拟物风',
  key: 'purple',
  description: '💎 立体质感 | 丰富色彩 | 层次设计',
  gradient: 'linear-gradient(135deg, #ddd6fe 0%, #e0e7ff 25%, #f3e8ff 50%, #fdf4ff 75%, #fefce8 100%)',
  config: {
    token: {
      // 增强主色调 - 更深更饱和的紫色
      colorPrimary: '#5b21b6',
      colorPrimaryBg: '#f3e8ff',
      colorPrimaryBgHover: '#e9d5ff',
      colorPrimaryBorder: '#c4b5fd',
      colorPrimaryBorderHover: '#a78bfa',
      colorPrimaryHover: '#7c3aed',
      colorPrimaryActive: '#4c1d95',
      colorPrimaryTextHover: '#6d28d9',
      colorPrimaryText: '#5b21b6',
      colorPrimaryTextActive: '#4c1d95',

      // 功能色彩增强 - 更鲜明的对比
      colorSuccess: '#059669',
      colorSuccessBg: '#d1fae5',
      colorSuccessBorder: '#6ee7b7',
      colorWarning: '#d97706',
      colorWarningBg: '#fef3c7',
      colorWarningBorder: '#fcd34d',
      colorError: '#dc2626',
      colorErrorBg: '#fee2e2',
      colorErrorBorder: '#fca5a5',
      colorInfo: '#2563eb',
      colorInfoBg: '#dbeafe',
      colorInfoBorder: '#93c5fd',

      borderRadius: 20,
      borderRadiusLG: 28,
      borderRadiusSM: 16,
      wireframe: false,

      // 背景色层次增强 - 加入更多色彩变化
      colorBgContainer: 'linear-gradient(135deg, #fefbff 0%, #f8fafc 50%, #f1f5f9 100%)',
      colorBgElevated: 'linear-gradient(135deg, #ffffff 0%, #fefbff 100%)',
      colorBgLayout: 'linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 25%, #faf5ff 50%, #fefce8 75%, #f0fdf4 100%)',
      colorBgSpotlight: 'linear-gradient(135deg, #ddd6fe 0%, #e0e7ff 100%)',

      // 边框色彩增强
      colorBorder: 'rgba(139, 92, 246, 0.15)',
      colorBorderSecondary: 'rgba(99, 102, 241, 0.08)',

      // 文字颜色优化 - 增加对比度
      colorText: '#0f172a',
      colorTextSecondary: '#334155',
      colorTextTertiary: '#475569',
      colorTextQuaternary: '#64748b',
      colorTextDescription: '#64748b',

      // 多层次阴影系统 - 加入色彩阴影
      boxShadow: '6px 6px 12px rgba(139, 92, 246, 0.08), -6px -6px 12px #ffffff, inset 0 0 0 1px rgba(255, 255, 255, 0.9)',
      boxShadowSecondary: '10px 10px 20px rgba(139, 92, 246, 0.12), -10px -10px 20px #ffffff, inset 0 0 0 1px rgba(255, 255, 255, 0.95)',
      boxShadowTertiary: '15px 15px 30px rgba(139, 92, 246, 0.15), -15px -15px 30px #ffffff, inset 0 0 0 2px rgba(255, 255, 255, 0.98)',

      fontFamily: '"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
      fontSize: 14,
      fontSizeLG: 16,
      fontSizeXL: 20,
      lineHeight: 1.6,
      controlHeight: 48,

      // 拟物化专用颜色扩展
      colorFillQuaternary: 'linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)',
      colorFillTertiary: 'linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%)',
      colorFillSecondary: 'linear-gradient(135deg, #cbd5e1 0%, #e2e8f0 100%)',
      colorFill: 'linear-gradient(135deg, #94a3b8 0%, #cbd5e1 100%)',

      // 新增色彩变量
      colorLink: '#5b21b6',
      colorLinkHover: '#7c3aed',
      colorLinkActive: '#4c1d95',
      colorHighlight: '#fef3c7',
      colorBgMask: 'rgba(91, 33, 182, 0.45)',
    },
    components: {
      Layout: {
        siderBg: 'linear-gradient(180deg, #fefbff 0%, #f8fafc 50%, #f1f5f9 100%)',
        headerBg: 'linear-gradient(90deg, #ffffff 0%, #fefbff 50%, #f8fafc 100%)',
        bodyBg: 'linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 25%, #faf5ff 50%, #fefce8 75%, #f0fdf4 100%)',
        headerHeight: 72,
        siderWidth: 300,
      },
      Menu: {
        itemBg: 'transparent',
        // 选中状态使用更明显的紫色渐变
        itemSelectedBg: 'linear-gradient(135deg, #ddd6fe 0%, #e0e7ff 50%, #f3e8ff 100%)',
        itemSelectedColor: '#5b21b6',
        // 悬停状态增加微妙的色彩
        itemHoverBg: 'linear-gradient(135deg, #ffffff 0%, #fefbff 50%, #f8fafc 100%)',
        itemActiveBg: 'linear-gradient(135deg, #e0e7ff 0%, #ddd6fe 100%)',
        itemBorderRadius: 20,
        itemMarginInline: 12,
        itemPaddingInline: 20,
      },
      Card: {
        borderRadiusLG: 28,
        paddingLG: 32,
        // 卡片阴影增加紫色调
        boxShadow: '8px 8px 16px rgba(139, 92, 246, 0.08), -8px -8px 16px #ffffff, inset 0 0 0 1px rgba(255, 255, 255, 0.9)',
      },
      Button: {
        borderRadius: 20,
        controlHeight: 48,
        paddingContentHorizontal: 28,
        fontWeight: 500,
        // 按钮阴影增加色彩层次
        boxShadow: '4px 4px 8px rgba(139, 92, 246, 0.06), -4px -4px 8px #ffffff',
      },
      Modal: {
        titleColor: '#0f172a',
        titleFontSize: 20,
        titleFontWeight: 600,
        headerBg: 'linear-gradient(135deg, #ffffff 0%, #fefbff 50%, #f8fafc 100%)',
        contentBg: 'linear-gradient(135deg, #fefbff 0%, #f8fafc 50%, #f1f5f9 100%)',
        borderRadiusLG: 28,
        // 模态框阴影增强
        boxShadow: '12px 12px 24px rgba(139, 92, 246, 0.12), -12px -12px 24px #ffffff, 0 0 0 1px rgba(255, 255, 255, 0.95)',
      },
      Avatar: {
        colorBgContainer: 'linear-gradient(135deg, #fefbff 0%, #f8fafc 50%, #f1f5f9 100%)',
        colorText: '#5b21b6',
        colorTextPlaceholder: '#64748b',
        boxShadow: '3px 3px 6px rgba(139, 92, 246, 0.06), -3px -3px 6px #ffffff',
      },
      Progress: {
        // 进度条使用更鲜明的色彩
        colorSuccess: '#059669',
        colorInfo: '#5b21b6',
        colorText: '#0f172a',
        colorTextDescription: '#334155',
        trailColor: 'linear-gradient(135deg, #e2e8f0 0%, #f1f5f9 100%)',
      },
      Pagination: {
        colorBgContainer: 'linear-gradient(135deg, #fefbff 0%, #f8fafc 50%, #f1f5f9 100%)',
        colorText: '#0f172a',
        colorTextDisabled: '#94a3b8',
        // 激活状态使用更深的紫色渐变
        itemActiveBg: 'linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #8b5cf6 100%)',
        itemInputBg: 'linear-gradient(135deg, #ffffff 0%, #fefbff 100%)',
        boxShadow: '2px 2px 4px rgba(139, 92, 246, 0.06), -2px -2px 4px #ffffff',
      },
      Table: {
        colorBgContainer: 'linear-gradient(135deg, #fefbff 0%, #f8fafc 50%, #f1f5f9 100%)',
        colorText: '#0f172a',
        colorTextHeading: '#0f172a',
        // 表头使用更明显的色彩区分
        headerBg: 'linear-gradient(135deg, #ddd6fe 0%, #e0e7ff 50%, #f1f5f9 100%)',
        rowHoverBg: 'linear-gradient(135deg, rgba(91, 33, 182, 0.08) 0%, rgba(124, 58, 237, 0.06) 50%, rgba(139, 92, 246, 0.04) 100%)',
        borderColor: 'rgba(139, 92, 246, 0.08)',
      },
      Input: {
        colorBgContainer: 'linear-gradient(135deg, #ffffff 0%, #fefbff 50%, #f8fafc 100%)',
        borderRadius: 16,
        paddingInline: 20,
        paddingBlock: 12,
        activeBorderColor: '#5b21b6',
        hoverBorderColor: '#7c3aed',
      },
      Select: {
        colorBgContainer: 'linear-gradient(135deg, #ffffff 0%, #fefbff 50%, #f8fafc 100%)',
        borderRadius: 16,
        // 选中选项使用紫色渐变
        optionSelectedBg: 'linear-gradient(135deg, #ddd6fe 0%, #e0e7ff 100%)',
        optionSelectedColor: '#5b21b6',
        optionActiveBg: 'linear-gradient(135deg, #f3e8ff 0%, #faf5ff 100%)',
      },
      // 新增组件配置
      Tag: {
        colorBgContainer: 'linear-gradient(135deg, #fefbff 0%, #f8fafc 100%)',
        colorText: '#334155',
        colorBorder: 'rgba(139, 92, 246, 0.15)',
      },
      Alert: {
        colorSuccessBg: 'linear-gradient(135deg, #d1fae5 0%, #ecfdf5 100%)',
        colorWarningBg: 'linear-gradient(135deg, #fef3c7 0%, #fffbeb 100%)',
        colorErrorBg: 'linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%)',
        colorInfoBg: 'linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%)',
      },
    },
  },
};

// 自然绿色主题 - 清新风格
export const greenTheme: CustomTheme = {
  name: '自然绿色',
  key: 'green',
  description: '🌿 清新自然 | 护眼绿色 | 舒适办公',
  gradient: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
  config: {
    token: {
      colorPrimary: '#059669',
      colorSuccess: '#10b981',
      colorWarning: '#f59e0b',
      colorError: '#ef4444',
      colorInfo: '#06b6d4',
      borderRadius: 8,
      borderRadiusLG: 12,
      borderRadiusSM: 6,
      wireframe: false,
      colorBgContainer: '#ffffff',
      colorBgElevated: '#f8fafc',
      colorBgLayout: '#f0fdf4',
      colorBorder: '#bbf7d0',
      colorBorderSecondary: '#dcfce7',
      colorText: '#064e3b',
      colorTextSecondary: '#047857',
      colorTextTertiary: '#059669',
      colorTextQuaternary: '#10b981',
      boxShadow: '0 1px 3px 0 rgba(5, 150, 105, 0.1), 0 1px 2px 0 rgba(5, 150, 105, 0.06)',
      boxShadowSecondary: '0 4px 6px -1px rgba(5, 150, 105, 0.1), 0 2px 4px -1px rgba(5, 150, 105, 0.06)',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", sans-serif',
      fontSize: 14,
      fontSizeLG: 16,
      fontSizeXL: 20,
      lineHeight: 1.6,
      controlHeight: 40,
    },
    components: {
      Layout: {
        siderBg: '#ffffff',
        headerBg: '#ffffff',
        bodyBg: '#f0fdf4',
        headerHeight: 64,
        siderWidth: 280,
      },
      Menu: {
        itemBg: 'transparent',
        itemSelectedBg: 'rgba(5, 150, 105, 0.1)',
        itemSelectedColor: '#059669',
        itemHoverBg: 'rgba(5, 150, 105, 0.05)',
        itemActiveBg: 'rgba(5, 150, 105, 0.15)',
        itemBorderRadius: 8,
        itemMarginInline: 8,
        itemPaddingInline: 16,
      },
      Card: {
        borderRadiusLG: 12,
        paddingLG: 24,
      },
      Button: {
        borderRadius: 8,
        controlHeight: 40,
        paddingContentHorizontal: 20,
        fontWeight: 500,
      },
      Modal: {
        titleColor: '#064e3b',
        titleFontSize: 18,
        titleFontWeight: 600,
        headerBg: '#ffffff',
        contentBg: '#ffffff',
        borderRadiusLG: 12,
      },
      Avatar: {
        colorBgContainer: '#ffffff',
        colorText: '#059669',
        colorTextPlaceholder: '#6b7280',
      },
      Progress: {
        colorSuccess: '#10b981',
        colorInfo: '#059669',
        colorText: '#064e3b',
        colorTextDescription: '#374151',
      },
      Pagination: {
        colorBgContainer: '#ffffff',
        colorText: '#064e3b',
        colorTextDisabled: '#9ca3af',
        itemActiveBg: '#059669',
        itemInputBg: '#ffffff',
      },
      Table: {
        colorBgContainer: '#ffffff',
        colorText: '#064e3b',
        colorTextHeading: '#064e3b',
        headerBg: '#f0fdf4',
        rowHoverBg: 'rgba(5, 150, 105, 0.05)',
      },
    },
  },
};

// 科技蓝主题 - 未来科技风
export const techTheme: CustomTheme = {
  name: '科技蓝',
  key: 'tech',
  isDark: true,
  description: '🚀 未来科技 | 蓝色光效 | 专业高效',
  gradient: 'linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%)',
  config: {
    token: {
      colorPrimary: '#0ea5e9',
      colorSuccess: '#06b6d4',
      colorWarning: '#f59e0b',
      colorError: '#ef4444',
      colorInfo: '#3b82f6',
      borderRadius: 4,
      borderRadiusLG: 8,
      borderRadiusSM: 2,
      wireframe: false,
      colorBgContainer: '#0f1419',
      colorBgElevated: '#1a202c',
      colorBgLayout: '#0a0e13',
      colorBorder: '#2d3748',
      colorBorderSecondary: '#1a202c',
      colorText: '#e2e8f0',
      colorTextSecondary: '#a0aec0',
      colorTextTertiary: '#718096',
      colorTextQuaternary: '#4a5568',
      boxShadow: '0 0 0 1px rgba(14, 165, 233, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.4)',
      boxShadowSecondary: '0 0 0 1px rgba(14, 165, 233, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.4)',
      fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Inter", sans-serif',
      fontSize: 13,
      fontSizeLG: 15,
      fontSizeXL: 18,
      lineHeight: 1.5,
      controlHeight: 36,
    },
    components: {
      Layout: {
        siderBg: '#0f1419',
        headerBg: '#0f1419',
        bodyBg: '#0a0e13',
        headerHeight: 60,
        siderWidth: 260,
      },
      Menu: {
        darkItemBg: '#0f1419',
        darkItemSelectedBg: 'rgba(14, 165, 233, 0.15)',
        darkItemSelectedColor: '#0ea5e9',
        darkItemHoverBg: 'rgba(14, 165, 233, 0.08)',
        darkItemColor: '#a0aec0',
        itemBorderRadius: 4,
        itemMarginInline: 6,
        itemPaddingInline: 12,
      },
      Card: {
        borderRadiusLG: 8,
        paddingLG: 20,
      },
      Button: {
        borderRadius: 4,
        controlHeight: 36,
        paddingContentHorizontal: 16,
        fontWeight: 500,
      },
      Modal: {
        titleColor: '#e2e8f0',
        titleFontSize: 16,
        titleFontWeight: 600,
        headerBg: '#0f1419',
        contentBg: '#0f1419',
        borderRadiusLG: 8,
      },
      Avatar: {
        colorBgContainer: '#0f1419',
        colorText: '#0ea5e9',
        colorTextPlaceholder: '#4a5568',
      },
      Progress: {
        colorSuccess: '#06b6d4',
        colorInfo: '#0ea5e9',
        colorText: '#e2e8f0',
        colorTextDescription: '#a0aec0',
      },
      Pagination: {
        colorBgContainer: '#0f1419',
        colorText: '#e2e8f0',
        colorTextDisabled: '#4a5568',
        itemActiveBg: '#0ea5e9',
        itemInputBg: '#0f1419',
      },
      Table: {
        colorBgContainer: '#0f1419',
        colorText: '#e2e8f0',
        colorTextHeading: '#e2e8f0',
        headerBg: '#0a0e13',
        rowHoverBg: 'rgba(14, 165, 233, 0.08)',
      },
    },
    algorithm: 'darkAlgorithm' as any,
  },
};

// 所有主题列表
export const themes: CustomTheme[] = [
  lightTheme,
  darkTheme,
  purpleTheme,
  greenTheme,
  techTheme,
];

// 根据key获取主题
export const getThemeByKey = (key: string): CustomTheme => {
  return themes.find(theme => theme.key === key) || lightTheme;
};

// 主题预设
export const themePresets = {
  light: lightTheme,
  dark: darkTheme,
  purple: purpleTheme,
  green: greenTheme,
  tech: techTheme,
};
